<template>
  <view class="wrapper" :style="{ position: 'relative', top: top }">
    <view class="header-box">
      <view class="search-line">
        <view class="search-block">
          <view class="iconfont icon-sousuo search-icon"></view>
          <input
            :placeholder="$t('search.Search...')"
            placeholder-style="color: #878787;"
            class="search-input"
            v-model="searchValue"
            :confirm-type="$t('chat.send')"
            :confirm-hold="true"
            :adjust-position="false"
            cursor-spacing="15"
          />
        </view>
        <view class="cancel-btn" @click.stop="handleCancel">{{
          $t("index.Cancel")
        }}</view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="cell-group" :style="cellGroupHeight">
      <view class="chat-content" v-if="list && list.length > 0">
        <view v-for="(item, index) in list" :key="index" class="chat-line">
          <view
            class="chat-line__item"
            @click="
              gotoPage(
                `/pages/chat/PersonalChat?targetId=${
                  item.userVo.userId
                }&commentName=${formatUserName(item)}&friendId=${item.friendId}`
              )
            "
          >
            <image
              v-if="item.userVo.avatarCompress || item.userVo.avatar"
              :src="item.userVo.avatarCompress || item.userVo.avatar"
              class="avatar-image"
              mode="aspectFill"
            >
            </image>
            <view
              v-else
              class="avatar-image"
              :style="{ background: `${item.defaultColor}` }"
              >{{ formatUserName(item).slice(0, 1) }}</view
            >
            <text class="right-text omit">{{ formatUserName(item) }}</text>
          </view>
        </view>
      </view>
      <view v-else class="empty-result">
        <view class="iconfont icon-wujieguo"></view>
        <view class="empty-text"
          >{{ $t("search.resultEmptyLeft")
          }}<text class="empty-green">{{ $t("search.Me") }}</text
          >{{ $t("search.resultEmptyRight") }}</view
        >
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      searchValue: "",
      top: "",
      cellGroupHeight: 0,
    };
  },
  computed: {
    ...mapState(["friendsList"]),
    list() {
      if (!this.searchValue) {
        return this.friendsList.filter((o) => o.userVo != null);
      } else {
        return this.friendsList
          .map((item) => {
            item.formatUserName = this.formatUserName(item);
            return item
          })
          .filter((item) => {
            return (
              item.formatUserName.match(this.searchValue) ||
              String(item.userVo.userId).match(this.searchValue)
            );
          });
      }
    },
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query
      .select(".header-box")
      .boundingClientRect((data) => {
        // header-box节点高度
        const headerBoxHeight = data.height + "px";
        this.cellGroupHeight =
          "height:" +
          "calc(" +
          "100vh" +
          " " +
          "-" +
          " " +
          headerBoxHeight +
          ")";
      })
      .exec();
  },
  methods: {
    gotoPage(url, type) {
      if (type == 1) {
        uni.switchTab({
          url,
        });
        return;
      }
      uni.navigateTo({
        url,
      });
    },
    handleCancel() {
      this.searchValue = ""; /*  */
      uni.navigateBack();
    },
  },
  onLoad() {
    const sysInfo = uni.getSystemInfoSync();
    this.top = sysInfo.safeArea.top + "px";
  },
};
</script>

<style lang="scss" scoped>
.chat-content {
  background-color: #f6f6f6;

  .chat-line {
    background-color: #fff;
    padding: 0 30rpx;
    border-bottom: 2rpx solid #f6f6f6;

    &__item {
      height: 120rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .avatar-image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 80rpx;
      font-size: 30upx;
      font-weight: 400;
      color: #ffffff;
      margin-right: 30rpx;
    }

    .right-text {
      flex: 1;
      font-size: 30upx;
      font-weight: 400;
      color: #000000;
    }
  }
}
.wrapper {
  .header-box {
    box-sizing: border-box;
    padding: 30upx 30upx 0;
    .search-line {
      display: flex;
      align-items: center;
      .search-block {
        width: 100%;
        height: 76upx;
        background: #ffffff;
        border-radius: 38upx;
        box-sizing: border-box;
        padding: 30upx;
        display: flex;
        align-items: center;
        .search-icon {
          color: #878787;
          font-size: 30upx;
        }
        .search-input {
          flex: 1;
          margin-left: 30upx;
          font-size: 26upx;
          font-weight: 400;
          color: #212121;
          line-height: 1em;
        }
      }
      .cancel-btn {
        margin-left: 30upx;
        font-size: 26upx;
        font-weight: 400;
        color: #4eafa3;
        white-space: nowrap;
      }
    }
  }
  .cell-group {
    margin-top: 40upx;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    .empty-result {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 320rpx 0rpx 200rpx;
      .icon-wujieguo {
        font-size: 116rpx;
        color: #e6e6e6;
      }
      .empty-text {
        margin-top: 30rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #878787;
        line-height: 33rpx;
        .empty-green {
          color: #61bdb2;
        }
      }
    }
  }
}
</style>